<template>
  <div>
    <div>
      <el-button @click="insert">发送insert-player请求</el-button>
      <el-button @click="query">发送query-player请求</el-button>
    </div>
    <div class="player-content">
      <div class="insert-content">
        <el-form
          class="insert-form"
          :model="player"
          ref="player"
          label-width="auto"
        >
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="player.nickname"></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="playerCode">
            <el-input v-model="player.playerCode"></el-input>
          </el-form-item>

          <el-form-item label="金币数量" prop="goldCoin">
            <el-input-number v-model="player.goldCoin"></el-input-number>
          </el-form-item>

          <el-form-item label="银币数量" prop="silverCoin">
            <el-input v-model.number="player.silverCoin"></el-input>
          </el-form-item>
          <el-form-item label="职业选择">
            <el-select v-model="player.profession">
              <template v-for="(e, i) in professions">
                <el-option :key="i" :value="e.value" :label="e.label">
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名外键" prop="usernameFk">
            <el-input v-model="player.usernameFk"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="query-content">
        <el-form
          ref="queryCondition"
          :model="playerSearchForm.queryCondition"
          label-width="auto"
        >
          <el-row :gutter="12">
            <el-col :span="4">
              <el-form-item prop="professions" label="类别">
                <el-select
                  class="qc-professions"
                  multiple
                  v-model="playerSearchForm.queryCondition.professions"
                >
                  <template v-for="(e, i) in professions">
                    <el-option :key="i" :label="e.label" :value="e.value">
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-form-item prop="nickNameSml" label="职业">
                <el-input
                  v-model.trim="playerSearchForm.queryCondition.nickNameSml"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item prop="goldCoinMin" label="金币最小">
                <el-input-number
                  controls-position="right"
                  size="mini"
                  v-model="playerSearchForm.queryCondition.goldCoinMin"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="goldCoinMax" label="最多">
                <el-input-number
                  controls-position="right"
                  size="mini"
                  v-model="playerSearchForm.queryCondition.goldCoinMax"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label-width="10px">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="queryByCondition(1)"
                  >查询
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item label-width="0">
                <el-button
                  type="warning"
                  icon="el-icon-refresh"
                  @click="() => $refs.queryCondition.resetFields()"
                >
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="results" height="600px">
          <el-table-column label="昵称" prop="nickname"></el-table-column>
          <el-table-column label="职业" prop="profession"></el-table-column>
          <el-table-column
            label="职业EX"
            :formatter="formatProfession"
          ></el-table-column>
          <el-table-column
            label="金币数量"
            prop="goldCoin"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="银币数量"
            prop="silverCoin"
            width="80px"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          :total="total"
          :current-page.sync="playerSearchForm.queryCondition.pageNum"
          @current-change="queryByCondition"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *{
      "playerId": 86,
      "playerCode": "8112475",
      "nickname": "kittyhi5",
      "goldCoin": 99,
      "silverCoin": 20,
      "profession": "architect",
      "usernameFk": "22222225523",
      "version": 0
    },
 *
 */
// import New from './components/New.vue';

export default {
  name: "PromiseView",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      // architect, accountant, wizard, writer

      professions: [
        { label: "建筑师", value: "architect", index: 0 },
        { label: "会计师", value: "accountant", index: 1 },
        { label: "巫师", value: "wizard", index: 2 },
        { label: "作家", value: "writer", index: 3 },
      ],
      player: {
        nickname: "",
        playerCode: "",
        goldCoin: 0,
        silverCoin: 0,
        profession: "architect",
        usernameFk: "",

        playerId: 222,
        version: 0,
      },
      playerSearchForm: {
        pageNum: 1,
        pageSize: 20,
        queryCondition: {
          goldCoinMax: null,
          goldCoinMin: null,
          // nickNameSml: null,
          nickNameSml: null,
          professions: [],
        },
      },

      total: 0,
      results: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    insert() {
      this.$http({
        method: "post",
        url: "http://localhost:9090/ceto/player/insert",
        data: this.player,
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          // console.log(this.$refs.player);
          this.$refs.player.resetFields();
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    query() {
      //  http://localhost:9090/ceto/player/query
      this.$http({
        method: "post",
        url: "http://localhost:9090/ceto/player/query",
        data: this.playerSearchForm,
      }).then(
        (res) => {
          // this.$message.warning(JSON.stringify(res.data));
          this.results = res.data.results;
          this.total = res.data.total;
        },
        (error) => {
          console.log(
            ".playerSearchForm request error : " + error.response.status
          );
        }
      );
    },
    queryByCondition(pageNum) {
      pageNum && (this.playerSearchForm.pageNum = pageNum);
      this.query();
    },
    formatProfession(row) {
      // let p = row.profession;
      // let q = this.professions.find((x) => x.value === p);
      let q = this.professions.find((x) => x.value === row.profession);
      return q ? q.label : "N/A";
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.insert-form {
  max-width: 300px;
}
.player-content {
  display: flex;
}
.insert-content {
  border: 3px solid salmon;
}
.query-content {
  border: 4px solid green;
  flex: 1;
  max-width: 1400px;
}
.qc-professions {
  width: 240px;
}
</style>
